import Tabs, { TabsProps } from '@/components/Tabs';
import React, { useState } from 'react';
import HistoryData from './components/HistoryData';
import RealtimeMonitor from './components/RealtimeMonitor';

const BatteryMonitor: React.FC = () => {
  const [activeKey, setActiveKey] = useState('1');
  const items: TabsProps['items'] = [
    {
      key: '1',
      label: '实时监控',
    },
    {
      key: '2',
      label: '历史数据',
    },
  ];
  return (
    <>
      <Tabs
        hasHeaderBorder={false}
        activeKey={activeKey}
        style={{ padding: 0 }}
        onChange={(key) => setActiveKey(key)}
        items={items}
      ></Tabs>
      {/*{activeKey === '1' && }*/}
      <div hidden={activeKey === '2'}>
        <RealtimeMonitor />
      </div>
      <div hidden={activeKey === '1'}>
        <HistoryData />
      </div>
      {/*{activeKey === '2' && }*/}
    </>
  );
};

export default BatteryMonitor;
